<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>BootStrap Table使用</title>
    <!--Jquery组件引用-->
    <script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>

    <!--bootstrap组件引用-->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css" />

    <!--bootstrap table组件以及中文包的引用-->
    <script type="text/javascript" src="js/bootstrap-table.js"></script>
    <link rel="stylesheet" href="css/bootstrap-table.css" />
    <script type="text/javascript" src="js/bootstrap-table-zh-CN.js"></script>

    <!--页面js文件的引用-->
    <script type="text/javascript" src="js/main.js"></script>

    <!--bootstrap table editable组件引用-->
    <link rel="stylesheet" href="http://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css">

    <!--bootstrap table recorder-rows组件引用 -->
    <script type="text/javascript" src="js/extensions/recorder-rows/bootstrap-table-reorder-rows.js"></script>
    <script type="text/javascript" src="js/extensions/recorder-rows/jquery.tablednd.js"></script>
</head>

<body>
<div class="panel-body" style="padding-bottom:0px;">
    <div class="panel panel-default">
        <div class="panel-heading">查询条件</div>
        <div class="panel-body">
            <form id="formSearch" class="form-horizontal">
                <div class="form-group" style="margin-top:15px">
                    <label class="control-label col-sm-1" for="txt_search_departmentname">部门名称</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="txt_search_departmentname">
                    </div>
                    <label class="control-label col-sm-1" for="txt_search_statu">状态</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="txt_search_statu">
                    </div>
                    <div class="col-sm-4" style="text-align:left;">
                        <button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary">查询</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div id="toolbar" class="btn-group">
        <button id="btn_add" type="button" class="btn btn-default" data-toggle="modal" data-target="#insertModal">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
        </button>
        <button id="btn_edit" type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
        </button>
        <button id="btn_delete" type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
        </button>
    </div>

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="insertModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        ×
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        添加商品
                    </h4>
                </div>
                <div class="modal-body">
                    <select id="ps">
                        <option value="0">0</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                    </select>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        关闭
                    </button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal">
                        确认
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <table id="tb_departments"></table>
</div>
</body>

<script type="text/javascript">
    $(function () {

        //1.初始化Table
        var oTable = new TableInit();
        oTable.Init();

        //2.初始化Button的点击事件
        var oButtonInit = new ButtonInit();
        oButtonInit.Init();

    });


    var TableInit = function () {
        var oTableInit = new Object();
        //初始化Table
        oTableInit.Init = function () {
            $('#tb_departments').bootstrapTable({
                url: '/girl/lS',         				//请求后台的URL（*）
                method: 'post',                       	//请求方式（*）
                contentType: "application/x-www-form-urlencoded",
                dataType: "json",						//数据类型
                toolbar: '#toolbar',               	//工具按钮用哪个容器
                striped: false,                      	//是否显示行间隔色
                cache: false,                       	//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   	//是否显示分页（*）
                sortable: false,                    	//是否启用排序
                sortOrder: "asc",                   	//排序方式
                queryParamsType: '',
                queryParams: oTableInit.queryParams, 	//传递参数（*）
                sidePagination: "server",           	//分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1,                       	//初始化加载第一页，默认第一页
                pageSize: 10,                       	//每页的记录行数（*）
                pageList: [10, 25, 50, 100],        	//可供选择的每页的行数（*）
                search: true,                       	//是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                strictSearch: true,						//启用全匹配搜索，否则为模糊搜索
                searchOnEnterKey: false,				//按回车触发搜索方法，否则自动触发搜索方法
                showColumns: true,                  	//是否显示所有的列
                showRefresh: true,                  	//是否显示刷新按钮
                minimumCountColumns: 2,             	//最少允许的列数
                clickToSelect: true,                	//是否启用点击选中行
                //height: 500,                        	//行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "ID",                     	//每一行的唯一标识，一般为主键列
                showToggle:true,                    	//是否显示详细视图和列表视图的切换按钮
                cardView: false,                    	//是否显示详细视图
                detailView: true,                  		//是否显示父子表
                columns: [{
                    checkbox: true
                }, {
                    field: 'id',
                    title: 'ID',
                    align: 'center',
                    valign: 'middle'
                }, {
                    field: 'age',
                    title: 'AGE',
                    align: 'center',
                    valign: 'middle'
                }, {
                    field: 'cupSize',
                    title: 'CupSize',
                    align: 'center',
                    valign: 'middle'
                } ],
                //注册加载子表的事件。注意下这里的三个参数！
                onExpandRow: function (index, row, $detail) {
                    oInit.InitSubTable(index, row, $detail);
                }
            });
        };

        //得到查询的参数
        oTableInit.queryParams = function (params) {
            var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
//		            limit: params.limit,   //页面大小
//		            offset: params.offset,  //页码
                pageNumber: params.pageNumber,
                pageSize: params.pageSize,
//		            departmentname: $("#txt_search_departmentname").val(),
//		            statu: $("#txt_search_statu").val(),
                search: params.search
            };
            return temp;
        };

        //初始化子表格(无线循环)
        var oInit = new Object();
        oInit.InitSubTable = function (index, row, $detail) {
            var parentid = row.id;
            var cur_table = $detail.html('<table></table>').find('table');
            $(cur_table).bootstrapTable({
                url: '/girl/sub/lC',
                method: 'post',
                contentType: "application/x-www-form-urlencoded",
                dataType: "json",						//数据类型
                queryParams: { strParentID: parentid },
                ajaxOptions: { strParentID: parentid },
                clickToSelect: true,
                detailView: true,//父子表
                uniqueId: "subId",
                pageSize: 10,
                pageList: [10, 25],
                columns: [{
                    checkbox: true
                }, {
                    field: 'subId',
                    title: 'SubId'
                }, {
                    field: 'grade',
                    title: 'Grade'
                }, {
                    field: 'name',
                    title: 'Name'
                } ],
                //无线循环取子表，直到子表里面没有记录
                onExpandRow: function (index, row, $Subdetail) {
                    oInit.InitSubTable(index, row, $Subdetail);
                }
            });
        };

        return oTableInit;
    };


    var ButtonInit = function () {
        var oInit = new Object();
        var postdata = {};

        oInit.Init = function () {
            //初始化页面上面的按钮事件
        };

        return oInit;
    };
</script>

</html>